<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
    </div>

    <script src="../js/vue.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            msg: "hiho"
          }
        },
        //生命周期函数:在一个组件周期范围内 某一时刻会自动执行的函数
        //1. 在实例生成之前
        beforeCreate() {
          console.log(123)

          return 
        },
        //2. 生成实例之后自动调用
        created() {
          console.log(465);          
        },
        //3. 在组件内容渲染到页面之前调用
        beforeMount() {
          
          console.log(document.getElementById('app').innerHTML)
          console.log('渲染之前')
        },
        //4. 渲染之后调用
        mounted() {
          console.log(document.getElementById('app').innerHTML)
          console.log('渲染之后')
        },
        //5. 当数据发生改变时调用
        beforeUpdate() {
          console.log('改变之前');
        },
        //6. 数据发生改变之后调用
        updated() {
          console.log('改变之后');          
        },
        //7. 当vue实例失效时,自动调用
        beforeUnmount() {
          console.log('beforeUnmount');
        },
        //8. 当vue实例失效时, dom完全销毁,自动执行函数
        unmounted() {
          console.log('unmounted');
        },
        //9. 全局捕获错误
        errorCaptured: (err, vm, info) => {
          console.log(err, vm, info);
          return false
        },
        //template:`<h1>{{msg}}</h1>`

      });

      app.mount('#app');
      //延时销毁
      // setTimeout(() => {
      //   app.unmount('#app');
      // }, 2000);
    </script>
  </body>
</html>